import 'package:flutter/material.dart';
import 'package:heart_friend/page/appbar/custom_appbar.dart';
import 'package:logger/logger.dart';

class EditProfile extends StatefulWidget {
  const EditProfile({super.key});

  @override
  State createState() => _EditProfileState();
}

class _EditProfileState extends State<EditProfile> {
  late TextEditingController _name_controller;
  late TextEditingController _pwd_controller;
  late Logger _logger;
  bool? checkboxSelected = false;

  @override
  void initState() {
    super.initState();
    _logger = Logger(printer: PrettyPrinter(methodCount: 0));
    _name_controller = TextEditingController();
    _pwd_controller = TextEditingController();
  }

  @override
  void dispose() {
    _name_controller.dispose();
    _pwd_controller.dispose();
    super.dispose();
  }

  void _login() {
    _logger.d("_login");
    _logger.d("_login message = ${_name_controller.text.toString()}");
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: CustomAppbar(
        title: "完善资料",
        leadingWidget: TextButton(
            onPressed: () => {Navigator.of(context).pop('返回')},
            child: const Text(
              '返回',
              style: TextStyle(color: Colors.blue, fontSize: 20),
            )),
        trailingWidget: const Text(""),
      ),
      resizeToAvoidBottomInset: false,
      body: Align(
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          //
          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
          // action in the IDE, or press "p" in the console), to see the
          // wireframe for each widget.
          children: [
            const SizedBox(
              height: 100,
            ),
            Image.asset('images/img_header.png', height: 60, width: 60),
            const SizedBox(
              height: 20,
            ),
            const Text(
              '心友',
              style: TextStyle(
                  color: Colors.red, fontWeight: FontWeight.bold, fontSize: 28),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 10, 10, 0),
              child: TextField(
                controller: _name_controller,
                maxLength: 11,
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(
                  hintText: "手机号",
                  border: const OutlineInputBorder(),
                  suffixIcon: IconButton(
                      onPressed: () {
                        setState(() {
                          _name_controller.clear();
                        });
                      },
                      icon: const Icon(Icons.clear)),
                ),
                onChanged: (value) {},
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 0, 10, 0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _pwd_controller,
                      obscureText: false,
                      keyboardType:
                          const TextInputType.numberWithOptions(signed: true),
                      decoration: InputDecoration(
                          hintText: "填写验证码",
                          border: const OutlineInputBorder(),
                          suffixIcon: IconButton(
                              onPressed: () {
                                setState(() {
                                  _pwd_controller.clear();
                                });
                              },
                              icon: const Icon(Icons.clear))),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.blue,
                          shape: const RoundedRectangleBorder()),
                      child: const Padding(
                        padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                        child: Text(
                          "获取",
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            const Padding(
                padding: EdgeInsets.all(10.0),
                child: Text(
                  '未注册的手机号码验证后会自动注册新账号',
                  style: TextStyle(color: Colors.grey),
                )),
            Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
              child: Row(
                children: [
                  Expanded(
                      child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.blue,
                        minimumSize: const Size(double.infinity, 60),
                        shape: const RoundedRectangleBorder()),
                    onPressed: () => _login(),
                    //通过控制 Text 的边距来控制控件的高度
                    child: const Padding(
                      padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                      child: Text(
                        "登录/注册",
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  ))
                ],
              ),
            ),
            Padding(
                padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 10.0),
                child: Row(children: [
                  _colorfulCheckBox(),
                  const Expanded(
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: '我已认证阅读并同意',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                      TextSpan(
                          text: '<<联通统一认证服务条款>>',
                          style: TextStyle(fontSize: 12, color: Colors.blue)),
                      TextSpan(
                          text: '和',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                      TextSpan(
                          text: '<<服务协议>>.<<隐式政策>>',
                          style: TextStyle(fontSize: 12, color: Colors.blue)),
                      TextSpan(
                          text: '并授权交友获取手机号,手册登录将自动注册',
                          style: TextStyle(fontSize: 12, color: Colors.black)),
                    ])),
                  )
                ])),
          ],
        ),
      ),
    );
  }

  Checkbox _colorfulCheckBox() {
    return Checkbox(
        value: checkboxSelected,
        activeColor: Colors.red,
        checkColor: Colors.green,
        onChanged: (value) {
          setState(() {
            checkboxSelected = value;
          });
        });
  }
}
